<script setup lang="ts">
import { ref } from 'vue'
import type { FormItemProps, FormProps, FormInstance } from 'element-plus'
import type { AddUserType } from '@/types/user'
import { ElMessage } from 'element-plus'
import { getAddUser } from '@/apis/login'
import { useRouter } from 'vue-router'
const router = useRouter()

const labelPosition = ref<FormProps['labelPosition']>('right')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
const formDate = ref({
  username: '',
  password: '',
  mobile: '',
  avatar: '',
})
// 自定义效验规则 :rule:规则,没用,value:表单输入的数据,callback:函数 -数据不管合不合法,都要调用callback
/*
callback函数:
合法 -调研callback() ; 相对于 next()
不合法:callback(new Error('错误提示信息'))  相当于 next(fasle)
*/
// 自定义效验规则
const checkMobile = (rule: object, value: string, callback: any) => {
  if (/^1[356789]\d{9}$/.test(value)) {
    //效验通过
    callback()
  } else {
    callback(new Error('手机号不合法'))
  }
}
//表单效验
const formRules = {
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在6~12位之间', trigger: 'blur' },
  ],
  mobile: [{ validator: checkMobile, trigger: 'blur' }],
}
//添加用户
const formref = ref<FormInstance>()
const addUser = () => {
  // console.log(formref.value)

  //1.兜底效验   validate对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise
  formref.value?.validate(async (valid: boolean) => {
    // 如果表单里的所有效验有一项没通过就结束

    if (!valid) return
    // 2.ajax添加新用户
    const res = await getAddUser(formDate.value)
    console.log(res)
    // 3.成功提示
    ElMessage.success('新增用户成功')
    // 4.跳转到用户列表页
    router.push('/user')
  })
}
addUser()
// 重置按钮
const resetForm = (formref: FormInstance | undefined) => {
  if (!formref) return
  formref?.resetFields()
}
</script>

<template>
  <el-card>
    <div class="card-header">
      <span>用户创建</span>
      <el-button plain @click="router.back()">返回</el-button>
    </div>
  </el-card>
  <el-card>
    <el-form
      :label-position="labelPosition"
      label-width="auto"
      :model="formDate"
      :rules="formRules"
      style="max-width: 600px"
      ref="formref"
    >
      <el-form-item label="用户名" :label-position="itemLabelPosition" prop="username">
        <el-input placeholder="请输入用户名" v-model="formDate.username" />
      </el-form-item>
      <el-form-item label="密码" :label-position="itemLabelPosition" prop="password">
        <el-input placeholder="请输入密码" v-model="formDate.password" />
      </el-form-item>
      <el-form-item label="手机号" :label-position="itemLabelPosition" prop="mobile">
        <el-input placeholder="请输入手机号" v-model="formDate.mobile" />
      </el-form-item>
      <el-form-item label="头像" :label-position="itemLabelPosition">
        <el-input placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item :label-position="itemLabelPosition">
        <el-button type="primary" style="margin-left: 50px" @click="addUser">立即创建</el-button>
        <el-button @click="resetForm(formref)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
}
</style>
